iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
自我挑戰組

網頁前端框架 Vue 3 從頭開始系列 第 7

vue.js 3.x 學習手冊 (7) 清單渲染

  • 分享至 

  • xImage
  •  

看過前幾篇文章的朋友應該會發現,我們開頭的範例都非常類似,一個下拉選單可以更改頁面中的值,今天也不例外,但要透過框架強化的項目會有所不同。

在案例中,我們的下拉選單內的值都是寫死在網頁上的,這部分其實有時候並不好維護:

<select v-model="name">
    <option value="Vue">Vue</option>
    <option value="React">React</option>
    <option value="Angular">Angular</option>
    <option value="Laravel">Laravel</option>
    <option value="CakePHP">CakePHP</option>
    <option value="Django">Django</option>
</select>

甚至有些時候選單內的值,也會透過後端提供給我們,這部分我們可以將選單資料放在vue data中,再透過v-for來渲染頁面項目,接下來就讓我們看看用法吧!

v-for, v-bind

HTML
<div id="app">
    <p>
        <select v-model="type">
            <option v-for="item in types" v-bind:value="item.value">{{ item.title }}</option>
        </select>
    </p>
    <p>
        <select v-model="name">
            <option v-for="item in names" v-bind:value="item.value">{{ item.title }}</option>
        </select>
    </p>
    <p>Type: {{ type }}</p>
    <p>Framework: {{ name }}</p>
</div>
Javascript
const app = Vue.createApp({
    data() {
        return {
            type: 'Frontend',
            name: 'Vue',
            names:[
                {title: "Vue", value: "Vue"},
                {title: "React", value: "React"},
                {title: "Angular", value: "Angular"},
                {title: "Laravel", value: "Laravel"},
                {title: "CakePHP", value: "CakePHP"},
                {title: "Django", value: "Django"},
            ],
            types:[
                {title: "Frontend", value: "Frontend"},
                {title: "Backend", value: "Backend"},
            ],
        }
    },
}).mount('#app');

透過上面的方式,將下拉選單資料置於vue中,再透過v-for在html元素中指定資料來源,其中v-bind是在HTML屬性中,如果需要用到vue data時使用,例如本範例中option的value。

v-bind可以縮寫用冒號進行縮寫,也就是上述案例HTML的4, 9行可以改寫如下:

<option v-for="item in names" :value="item.value">{{ item.title }}</option>
<option v-for="item in types" :value="item.value">{{ item.title }}</option>

當然這個案例還是有許多可以加強的地方,我們將會在未來的文章中繼續提升大家對Vue的認識,讓整個案例越來越完整。


上一篇
vue.js 3.x 學習手冊 (6) 雙向資料綁定
下一篇
vue.js 3.x 學習手冊 (8) v-for為何要定義key呢?
系列文
網頁前端框架 Vue 3 從頭開始10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言